<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="XCloud XCloud.show-简约方便的在线存储网站,支持桌面(浏览器)、移动端(APP)随存随取"/>
    <meta name="keywords" content="XCloud,xcloud,网络存储,云存储,在线存储,网盘,云盘,文件服务,后端开发"/>
    <title>Admin</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link type="text/css" rel="stylesheet" href="/css/framework/bootstrap/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/css/home.css">
    <link type="text/css" rel="stylesheet" href="/css/framework/toastr/toastr.min.css">
    <link type="text/css" rel="stylesheet" href="/css/framework/select/dist/css/bootstrap-select.min.css">
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/admin_chart.js"></script>
    <script type="text/javascript" src="/js/memory_chart.js"></script>
    <script type="text/javascript" src="/css/framework/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/css/framework/select/dist/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="/css/framework/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <style>
        input[type='text'], textarea, input[type='password'] {
            outline: none;
        }
        .btn:focus,
        .btn:active:focus {
            outline: none;
            border-color: transparent;
            box-shadow:none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var height_total = $(document).height();
            var head_title_height = $("#head_title").height();
            var foot_title_height = $("#foot_title").height();
            var table_head_height = $("#table_head").height();
            var menu_div_height = $("#menu_div").height();
            var table_height = height_total - (head_title_height + foot_title_height + menu_div_height + table_head_height) - 20;
            $("table tbody").height(table_height);
        }
        window.onresize = function () {
            var height_total = $(document).height();
            var head_title_height = $("#head_title").height();
            var foot_title_height = $("#foot_title").height();
            var table_head_height = $("#table_head").height();
            var menu_div_height = $("#menu_div").height();
            var table_height = height_total - (head_title_height + foot_title_height + menu_div_height + table_head_height) - 20;
            $("table tbody").height(table_height);
        }
    </script>
</head>
<body>
<button id="openUserDetail" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="display:none;"></button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">用户详情</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-6">
                        <div id="charts_user" style="width: 500px;height:500px;text-align: center;margin-left: -16px;"></div>
                    </div>
                    <div class="col-xs-6">
                        <div class="row" style="text-align: center">
                            <div>
                                <img id="user_detail_head" class="img-circle" src="/img/head.png" style="height: 90px;width: 90px">
                            </div>
                            <div style="text-align: center">
                                <span id="displayName" style="font-size: 22px;font-weight: 450"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2"></div>
                            <div class="col-xs-9" style="font-size: 15px;">
                                <div class="row" style="margin-bottom: 3px;margin-top: 5px;height: 1px;border-top: 1px solid rgb(229, 229, 229)"></div>
                                <div class="row" style="margin-bottom: 3px;">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">UID</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="uid" style="font-size: 14px">UID</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px;">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">角色</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="role" style="font-size: 14px">角色</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px;">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">昵称</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="nickname" style="font-size: 14px">昵称</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">手机</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="phone" style="font-size: 14px">手机</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">邮箱</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="email" style="font-size: 14px">邮箱</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">等级</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="level" style="font-size: 14px">等级</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">成长值</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="growth" style="font-size: 14px">成长值</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">分享次数</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="share" style="font-size: 14px">分享次数</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">下载流量</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="download" style="font-size: 14px">下载流量</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">网盘容量</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="capacity" style="font-size: 14px">网盘容量</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">注册时间</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="register" style="font-size: 14px"></span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px">
                                    <div class="col-xs-4" style="float: left">
                                        <span style="font-weight: 450">访问地址</span>
                                    </div>
                                    <div class="col-xs-8" style="float: left">
                                        <span id="ipAddress" style="font-size: 14px"></span>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom: 3px;margin-top: 5px;height: 1px;border-top: 1px solid rgb(229, 229, 229)"></div>
                            </div>
                            <div class="col-xs-1"></div>
                        </div>
                        <div class="row" style="margin-top: 10px;text-align: center;">
                            <div>
                                <span id="user_id" style="display: none"></span>
                                <span id="status" style="display: none"></span>
                                <button class="btn btn-info"><span id="lock">锁定</span></button>
                                <button id="remove" class="btn btn-danger" style="margin-left: 50px">注销</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="system_arg_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_system">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel_system">系统参数配置</h4>
            </div>
            <div class="modal-body">
                <div class="row" style="margin-left: 50px">
                        <div style="margin-top: 10px;font-size: 15px">
                            <span style="width:160px;display:inline-block;">网盘协议书地址:</span>
                            <span>
                                <input type="text" id="bookUrlInput" style="width: 300px" placeholder="默认类路径下为XCloud.pdf">
                            </span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="width:160px;display:inline-block;">APP二维码图片地址:</span>
                            <span>
                                <input type="text" id="appUrlInput" style="width: 300px" placeholder="默认类路径下为xcloud_app.jpg">
                            </span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="width:160px;display:inline-block;">网盘快速开始图片地址:</span>
                            <span>
                                <input type="text" id="starterUrlInput" style="width: 300px" placeholder="默认类路径下为xcloud_learn.png">
                            </span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="width:160px;display:inline-block;">网盘欢迎页通知内容:</span>
                            <span>
                                <input type="text" id="indexToastInput" style="width: 300px" placeholder="默认为欢迎语（可添加样式）">
                            </span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="width:160px;display:inline-block;">网盘主页通知内容:</span>
                            <span>
                                <input type="text" id="homeToastInput" style="width: 300px" placeholder="默认为欢迎语（可添加样式）">
                            </span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="width:160px;display:inline-block;">通知开关:</span>
                            <span class="form-inline">
                                <label class="checkbox">
                                    <input id="indexToastEnable" type="checkbox">&nbsp;欢迎页通知开关
                                </label>
                                <label class="checkbox" style="margin-left: 70px">
                                    <input id="homeToastEnable" type="checkbox">&nbsp;主页通知开关
                                </label>
                            </span>
                        </div>
                    </div>
                    <!--<div class="control-group" style="margin-top: 10px">
                        <label class="control-label" for="bookUrlInput">网盘协议书地址</label>
                        <div class="controls">
                            <input type="text" id="bookUrlInput">
                            <span class="help-inline">默认类路径下为XCloud.pdf</span>
                        </div>
                    </div>
                    <div class="control-group" style="margin-top: 10px">
                        <label class="control-label" for="appUrlInput">APP二维码图片地址</label>
                        <div class="controls">
                            <input type="text" id="appUrlInput">
                            <span class="help-inline">默认类路径下为xcloud_app.jpg</span>
                        </div>
                    </div>
                    <div class="control-group" style="margin-top: 10px">
                        <label class="control-label" for="starterUrlInput">网盘快速开始教程图片地址</label>
                        <div class="controls">
                            <input type="text" id="starterUrlInput">
                            <span class="help-inline">默认类路径下为xcloud_learn.png</span>
                        </div>
                    </div>
                    <div class="control-group" style="margin-top: 10px">
                        <label class="control-label" for="starterUrlInput">网盘页脚通知内容</label>
                        <div class="controls">
                            <input type="text" id="toastInput">
                            <span class="help-inline">默认为欢迎语</span>
                        </div>
                    </div>-->
            </div>
            <div class="modal-footer">
                <button id="system_argument" type="button" class="btn btn-primary">提交更改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function user_charts(data) {
        var chartDom = document.getElementById('charts_user');
        var myChart = echarts.init(chartDom, "admin_chart");
        var option;
        option = {
            title: {
                text: '用户容量统计',
                subtext: '容量统计（单位：MB）非实时',
                left: 'center'
            },
            grid: {
                left: '3%',   //图表距边框的距离
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '90%',
                left: 'center'
            },
            series: [
                {
                    name: '容量统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: (data.useCapacityNum / 1000000).toFixed(2), name: '已用'},
                        {value: ((data.capacityNum - data.useCapacityNum) / 1000000).toFixed(2), name: '剩余'},
                    ]
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
<div class="bgimg">
    <div id="head_title" class="row">
        <div class="navbar navbar-custom col-xs-12" style="height: 30px;">
            <div class="navbar-header">
                <a class="navbar-brand" href="/admin">
                    <span class="navbar-logo">
                        <img src="/img/control.png" style="height: 40px;">
                        <img src="/img/logo2.png" style="height: 30px;">
                    </span>
                </a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right" style="margin-top: 13px;">
                    <li style="text-decoration:none;margin-right: 20px;">
                        <img id="user_head" th:src="${session.currentUser.headUrl}" class="img-circle" style="height: 35px; width: 35px;">
                    </li>
                    <!--<li style="margin-left: 15px;margin-right: 20px;margin-top: -2px">
                        <a class="btn btn-default" href="/">返回</a>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12" style="height: 2px; border-top: 1px rgb(228, 226, 226) solid;"></div>
        </div>
        <div id="menu_div" class="row">
            <nav class="navbar navbar-btn">
                <div class="container" style="width: 95%">
                    <div id="navbar" class="navbar-collapse collapse">
                        <div class="nav navbar-left">
                            <img src="/img/yibiaopan_1.png" style="height: 23px;">
                            <div class="btn-group">
                                <button id="system_user" class="btn btn-default">用户来源分布</button>
                                <button id="chart_flow" class="btn btn-default">网盘流量监测</button>
                                <button id="chart_memory" class="btn btn-default">运行指标监测</button>
                            </div>
                            <img src="/img/shezhi_2.png" style="height: 23px;margin-left: 20px">
                            <div class="btn-group">
                                <button id="system_click" class="btn btn-default">系统参数配置</button>
                                <button id="open_system_art" class="btn btn-default" data-toggle="modal" data-target="#system_arg_model" style="display: none"></button>
                                <button id="calibration" class="btn btn-default">手动用量校准</button>
                            </div>
                            <script type="text/javascript">
                                $(function () {
                                    var socket;
                                    var switch_div = function (flag) {
                                        if (flag == 1) { // 用户分布
                                            $("#charts_memory").hide();
                                            $("#charts_flow").hide();
                                            $("#charts").show();
                                        } else if (flag == 2) { // 流量
                                            $("#charts_memory").hide();
                                            $("#charts").hide();
                                            $("#charts_flow").show();
                                        } else if (flag == 3) { // 内存参数
                                            $("#charts_flow").hide();
                                            $("#charts").hide();
                                            $("#charts_memory").show();
                                        }
                                    }
                                    $("#chart_flow").click(function () {
                                        if (socket != null) {
                                            socket.close();
                                            socket = null;
                                        }
                                        switch_div(2);
                                        if (typeof (WebSocket) == "undefined") {
                                            console.log("遗憾：您的浏览器不支持WebSocket");
                                            $.ajax({
                                                async: true,
                                                dataType: "json",
                                                url: "/admin/chart/flow",
                                                success: function (data) {
                                                    if (data.status == 200) {
                                                        toastr.options = {
                                                            "positionClass": "toast-top-title-center",
                                                        };
                                                        toastr.info(data.msg);
                                                        fun_chart_flow(data.data)
                                                    } else {
                                                        toastr.options = {
                                                            "positionClass": "toast-top-title-center",
                                                        };
                                                        toastr.error(data.msg);
                                                    }
                                                },
                                                error: function () {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.error("XCloud流量出入图表参数获取失败");
                                                },
                                                type: "get"
                                            })
                                        } else {
                                            console.log("恭喜：您的浏览器支持WebSocket");
                                            //实现化WebSocket对象
                                            //指定要连接的服务器地址与端口建立连接
                                            //注意ws、wss使用不同的端口。我使用自签名的证书测试，
                                            //无法使用wss，浏览器打开WebSocket时报错
                                            //ws对应http、wss对应https。
                                            socket = new WebSocket("wss://www.xcloud.show/socket/chart/flow");
                                            //连接打开事件
                                            socket.onopen = function() {
                                                console.log("Socket 已打开");
                                            };
                                            //收到消息事件
                                            socket.onmessage = function(msg) {
                                                console.log(msg.data);
                                                var obj = JSON.parse(msg.data);
                                                console.log(obj.data);
                                                fun_chart_flow(obj.data);
                                            };
                                            //连接关闭事件
                                            socket.onclose = function() {
                                                console.log("Socket已关闭");
                                            };
                                            //发生了错误事件
                                            socket.onerror = function() {
                                                console.log("Socket已关闭");
                                                toastr.options = {
                                                    "positionClass": "toast-top-title-center",
                                                };
                                                toastr.error("Socket已关闭");
                                            }
                                            //窗口关闭时，关闭连接
                                            window.unload=function() {
                                                socket.close();
                                            };
                                        }
                                    })
                                    $("#system_argument").click(function () {
                                        var bookUrl = $("#bookUrlInput").val();
                                        var appUrl = $("#appUrlInput").val();
                                        var starterUrl = $("#starterUrlInput").val();
                                        var toastIndex = $("#indexToastInput").val();
                                        var toastHome = $("#homeToastInput").val();
                                        var indexEnable = $("#indexToastEnable").prop("checked");
                                        var indexEnableNum = indexEnable ? 1 : 0;
                                        var homeEnable = $("#homeToastEnable").prop("checked");
                                        var homeEnableNum = homeEnable ? 1 : 0;
                                        $.ajax({
                                            async: true,
                                            url: "/admin/system/argument",
                                            data: {
                                                bookUrl: bookUrl,
                                                appUrl: appUrl,
                                                starterUrl: starterUrl,
                                                toastIndex: toastIndex,
                                                toastHome: toastHome,
                                                toastIndexEnable: indexEnableNum,
                                                toastHomeEnable: homeEnableNum
                                            },
                                            dataType: "json",
                                            success: function (data) {
                                                if (data.status == 200) {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.info(data.msg);
                                                } else {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.error(data.msg);
                                                }
                                            },
                                            error: function (data) {
                                                toastr.options = {
                                                    "positionClass": "toast-top-title-center",
                                                };
                                                toastr.error("系统配置参数修改失败");
                                            },
                                            type: "post"
                                        });
                                    })
                                    $("#system_click").click(function () {
                                        $.ajax({
                                            async: true,
                                            dataType: "json",
                                            url: "/admin/system/argument/get",
                                            success: function (data) {
                                                if (data.status == 200) {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.info(data.msg);
                                                    $("#bookUrlInput").val(data.data.bookUrl)
                                                    $("#appUrlInput").val(data.data.appUrl)
                                                    $("#starterUrlInput").val(data.data.starterUrl)
                                                    $("#indexToastInput").val(data.data.toastIndex)
                                                    $("#homeToastInput").val(data.data.toastHome)
                                                    if (data.data.toastIndexEnable == 1) {
                                                        $("#indexToastEnable").prop("checked", true);
                                                    } else if (data.data.toastIndexEnable == 0) {
                                                        $("#indexToastEnable").prop("checked", false);
                                                    }
                                                    if (data.data.toastHomeEnable == 1) {
                                                        $("#homeToastEnable").prop("checked", true);
                                                    } else if (data.data.toastHomeEnable == 0) {
                                                        $("#homeToastEnable").prop("checked", false);
                                                    }
                                                } else {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.error(data.msg);
                                                }
                                            },
                                            error: function () {
                                                toastr.options = {
                                                    "positionClass": "toast-top-title-center",
                                                };
                                                toastr.error("系统参数配置获取失败");
                                            },
                                            type: "get"
                                        })
                                        $("#open_system_art").click();
                                    })
                                    $("#system_user").click(function () {
                                        if (socket != null) {
                                            socket.close();
                                        }
                                        $.ajax({
                                            async: true,
                                            dataType: "json",
                                            url: "/admin/chart/user",
                                            success: function (data) {
                                                if (data.status == 200) {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.info(data.msg);
                                                    switch_div(1);
                                                    chart_user(data.data)
                                                } else {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.error(data.msg);
                                                }
                                            },
                                            error: function () {
                                                toastr.options = {
                                                    "positionClass": "toast-top-title-center",
                                                };
                                                toastr.error("用户类型图表参数获取失败");
                                            },
                                            type: "get"
                                        })
                                    })
                                    $("#chart_memory").click(function () {
                                        if (socket != null) {
                                            socket.close();
                                            socket = null;
                                        }
                                        switch_div(3);
                                        if (typeof (WebSocket) == "undefined") {
                                            console.log("遗憾：您的浏览器不支持WebSocket");
                                            $.ajax({
                                                async: true,
                                                dataType: "json",
                                                url: "/admin/chart/memory",
                                                success: function (data) {
                                                    if (data.status == 200) {
                                                        toastr.options = {
                                                            "positionClass": "toast-top-title-center",
                                                        };
                                                        toastr.info(data.msg);
                                                        fun_chart_memory_limit(data.data)
                                                    } else {
                                                        toastr.options = {
                                                            "positionClass": "toast-top-title-center",
                                                        };
                                                        toastr.error(data.msg);
                                                    }
                                                },
                                                error: function () {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.error("XCloud用户自定内存限制图表参数获取失败");
                                                },
                                                type: "get"
                                            })
                                        } else {
                                            console.log("恭喜：您的浏览器支持WebSocket");
                                            //实现化WebSocket对象
                                            //指定要连接的服务器地址与端口建立连接
                                            //注意ws、wss使用不同的端口。我使用自签名的证书测试，
                                            //无法使用wss，浏览器打开WebSocket时报错
                                            //ws对应http、wss对应https。
                                            socket = new WebSocket("wss://www.xcloud.show/socket/chart/memory");
                                            //连接打开事件
                                            socket.onopen = function() {
                                                console.log("Socket 已打开");
                                            };
                                            //收到消息事件
                                            socket.onmessage = function(msg) {
                                                console.log(msg.data);
                                                var obj = JSON.parse(msg.data);
                                                console.log(obj.data);
                                                fun_chart_memory_limit(obj.data);
                                                fun_chart_memory_jvm(obj.data);
                                                fun_chart_memory_machine(obj.data);
                                                fun_chart_cpu(obj.data);
                                            };
                                            //连接关闭事件
                                            socket.onclose = function() {
                                                console.log("Socket已关闭");
                                            };
                                            //发生了错误事件
                                            socket.onerror = function() {
                                                console.log("Socket已关闭");
                                                toastr.options = {
                                                    "positionClass": "toast-top-title-center",
                                                };
                                                toastr.error("Socket已关闭");
                                            }
                                            //窗口关闭时，关闭连接
                                            window.unload=function() {
                                                socket.close();
                                            };
                                        }
                                    })
                                    $("#calibration").click(function () {
                                        if (!confirm("确定要进行吗？")) {
                                            return;
                                        }
                                        $.ajax({
                                            async: true,
                                            dataType: "json",
                                            url: "/admin/calibration",
                                            success: function (data) {
                                                if (data.status == 200) {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.info(data.msg);
                                                } else {
                                                    toastr.options = {
                                                        "positionClass": "toast-top-title-center",
                                                    };
                                                    toastr.error(data.msg);
                                                }
                                            },
                                            error: function () {
                                                toastr.options = {
                                                    "positionClass": "toast-top-title-center",
                                                };
                                                toastr.error("手动用量校准失败");
                                            },
                                            type: "get"
                                        })
                                    })
                                })
                            </script>
                        </div>
                        <div class="nav navbar-right">
                            <img src="/img/yonghu_1.png" style="height: 23px;">
                            <select id="show_user_list_role" class="selectpicker" data-width="100px">
                                <option selected style="color: rgb(98,98,98)" value="33">
                                    全部用户
                                </option>
                                <option style="color: rgb(98,98,98)" value="1">
                                    手机用户
                                </option>
                                <option style="color: rgb(98,98,98)" value="0">
                                    邮箱用户
                                </option>
                                <option style="color: rgb(98,98,98)" value="2">
                                    QQ用户
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-5">
                <div class="row">
                    <div id="charts" style="width:600px;height:600px;text-align: center;margin-top: 15px"></div>
                    <div id="charts_flow" style="width:600px;height:580px;text-align: center;margin-top: 15px;display: none;"></div>
                    <div id="charts_memory" style="width:600px;height:600px;text-align: center;margin-top: 15px;display: none;">
                        <div style="height: 320px;width: 600px">
                            <div id="charts_memory_limit" class="col-xs-6" style="height: 320px;width: 300px;"></div>
                            <div id="charts_memory_jvm" class="col-xs-6" style="height: 320px;width: 300px;"></div>
                        </div>
                        <div style="height: 320px;width: 600px;top: 300px;position: absolute;">
                            <div id="charts_memory_machine" class="col-xs-6" style="height: 320px;width: 300px;"></div>
                            <div id="charts_cpu" class="col-xs-6" style="height: 320px;width: 300px;"></div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    var chartDom = document.getElementById('charts');
                    var myChart = echarts.init(chartDom, "admin_chart");
                    function chart_user(data) {
                        var option;
                        option = {
                            title: {
                                text: 'XCloud 用户来源分布',
                                subtext: '访问来源 非实时',
                                left: 'center'
                            },
                            grid: {
                                left: '3%',   //图表距边框的距离
                                right: '3%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                            },
                            series: [
                                {
                                    name: '用户类型',
                                    type: 'pie',
                                    radius: [50, 180],
                                    data: [
                                        {value: data.phone, name: '手机用户'},
                                        {value: data.email, name: '邮箱用户'},
                                        {value: data.qq, name: 'QQ用户'},
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }

                    var chartDomMemoryLimit = document.getElementById('charts_memory_limit');
                    var myChartMemoryLimit = echarts.init(chartDomMemoryLimit, 'admin_chart');

                    function fun_chart_memory_limit(data) {
                        var option;
                        option = {
                            title: {
                                text: 'XCloud 上传内存限制',
                                subtext: '内存占用率（单位：MB）实时',
                                left: 'center'
                            },
                            grid: {
                                top: '3%',
                                left: '3%',   //图表距边框的距离
                                right: '3%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                formatter: '{a} <br/>{b} : {c}%',
                                trigger: 'item'
                            },
                            series: [{
                                name: 'Memory Usage',
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 8,
                                        color: [
                                            [0.7, 'rgb(154, 183, 223)'],
                                            [1, 'rgb(227, 178, 216)']
                                        ]
                                    }
                                },
                                pointer: {
                                    itemStyle: {
                                        color: 'auto'
                                    }
                                },
                                splitLine: {
                                    distance: 5,
                                },
                                axisTick: {
                                    distance: 5,
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value}%',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                },
                                data: [{
                                    value: data.limit,
                                    name: 'LIMIT',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                }]
                            }],
                        };
                        myChartMemoryLimit.setOption(option);
                    }

                    var chartDomMemoryMachine = document.getElementById('charts_memory_machine');
                    var myChartMemoryMachine = echarts.init(chartDomMemoryMachine, 'admin_chart');

                    function fun_chart_memory_machine(data) {
                        var option;
                        option = {
                            title: {
                                text: 'XCloud 服务器内存占用',
                                subtext: '内存占用率（单位：MB）实时',
                                left: 'center'
                            },
                            grid: {
                                top: '3%',
                                left: '3%',   //图表距边框的距离
                                right: '3%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                formatter: '{a} <br/>{b} : {c}%',
                                trigger: 'item'
                            },
                            series: [{
                                name: 'Memory Usage',
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 8,
                                        color: [
                                            [0.7, 'rgb(154, 183, 223)'],
                                            [1, 'rgb(227, 178, 216)']
                                        ]
                                    }
                                },
                                pointer: {
                                    itemStyle: {
                                        color: 'auto'
                                    }
                                },
                                splitLine: {
                                    distance: 5,
                                },
                                axisTick: {
                                    distance: 5,
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value}%',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                },
                                data: [{
                                    value: data.machine,
                                    name: 'MACHINE',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                }]
                            }]
                        };
                        myChartMemoryMachine.setOption(option);
                    }

                    var chartDomMemoryJvm = document.getElementById('charts_memory_jvm');
                    var myChartMemoryJvm = echarts.init(chartDomMemoryJvm, 'admin_chart');

                    function fun_chart_memory_jvm(data) {
                        var option;
                        option = {
                            title: {
                                text: 'XCloud JVM内存占用',
                                subtext: '内存占用率（单位：MB）实时',
                                left: 'center'
                            },
                            grid: {
                                top: '3%',
                                left: '3%',   //图表距边框的距离
                                right: '3%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                formatter: '{a} <br/>{b} : {c}%',
                                trigger: 'item'
                            },
                            series: [{
                                name: 'Memory Usage',
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 8,
                                        color: [
                                            [0.7, 'rgb(154, 183, 223)'],
                                            [1, 'rgb(227, 178, 216)']
                                        ]
                                    }
                                },
                                splitLine: {
                                    distance: 5,
                                },
                                axisTick: {
                                    distance: 5,
                                },
                                pointer: {
                                    itemStyle: {
                                        color: 'auto'
                                    }
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value}%',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                },
                                data: [{
                                    value: data.jvm,
                                    name: 'JVM',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                }]
                            }]
                        };
                        myChartMemoryJvm.setOption(option);
                    }

                    // systemCpuLoad
                    var chartDomMemoryCpuLoad = document.getElementById('charts_cpu');
                    var myChartMemoryCpuLoad = echarts.init(chartDomMemoryCpuLoad, 'admin_chart');
                    function fun_chart_cpu(data) {
                        var option;
                        option = {
                            title: {
                                text: 'XCloud 服务器CPU负载',
                                subtext: 'CPU负载率（单位时间）实时',
                                left: 'center'
                            },
                            grid: {
                                top: '3%',
                                left: '3%',   //图表距边框的距离
                                right: '3%',
                                bottom: '3%',
                                containLabel: true,
                            },
                            tooltip: {
                                formatter: '{a} <br/>{b} : {c}%',
                                trigger: 'item'
                            },
                            series: [{
                                reduce: '90%',
                                name: 'CPU Load',
                                type: 'gauge',
                               /*progress: {
                                    show: true,
                                    width: 8,
                                },*/
                                axisLine: {
                                    lineStyle: {
                                        width: 8,
                                        color: [
                                            [0.7, 'rgb(154, 183, 223)'],
                                            [1, 'rgb(227, 178, 216)']
                                        ]
                                    }
                                },
                                splitLine: {
                                    distance: 5,
                                },
                                axisTick: {
                                    distance: 5,
                                },
                                pointer: {
                                    itemStyle: {
                                        color: 'auto',
                                    },
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value}%',
                                    textStyle: {
                                        fontSize: 15,
                                    }
                                },
                                data: [{
                                    value: data.systemCpuLoad,
                                    name: 'CPU',
                                    textStyle: {
                                        fontSize: 15
                                    }
                                }]
                            }]
                        };
                        myChartMemoryCpuLoad.setOption(option);
                    }

                    var chartDomFlow = document.getElementById('charts_flow');
                    var myChartFlow = echarts.init(chartDomFlow, "admin_chart");
                    function fun_chart_flow(data) {
                        /*var option;
                        option = {
                            title: {
                                text: 'XCloud 周流量出入',
                                subtext: '流量（单位：MB）实时',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                orient: 'vertical',
                                data: ['上行', '下行'],
                                left: 'left'
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: data.dayList
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '上行',
                                    type: 'bar',
                                    data: data.uploadFlowList,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                },
                                {
                                    name: '下行',
                                    type: 'bar',
                                    data: data.downloadFlowList,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };*/
                        var option;
                        option = {
                            title: {
                                text: 'XCloud 流量监测',
                                subtext: '流量（单位：MB）实时',
                                left: 'center'
                            },
                            legend: {
                                orient: 'vertical',
                                data: ['上行', '下行'],
                                left: 'left'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            grid: {
                                left: '3%',   //图表距边框的距离
                                right: '10%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false
                                    },
                                    data: data.dayList
                                },
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        onZero: false
                                    },
                                    data: data.dayList
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '上行',
                                    type: 'line',
                                    xAxisIndex: 0,
                                    smooth: true,
                                    itemStyle:{
                                        normal:{
                                            lineStyle:{
                                                width:2,
                                                type:'dotted'  //'dotted'虚线 'solid'实线
                                            }
                                        }
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    showSymbol:false,
                                    data: data.uploadFlowList,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                },
                                {
                                    name: '下行',
                                    type: 'line',
                                    xAxisIndex: 1,
                                    smooth: true,
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    showSymbol:false,
                                    data: data.downloadFlowList,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };
                        myChartFlow.setOption(option);
                    }

                    $.ajax({
                        async: true,
                        data: {
                            agree: 0
                        },
                        dataType: "json",
                        url: "/admin/chart/user",
                        traditional: true,
                        success: function (data) {
                            if (data.status == 200) {
                                toastr.options = {
                                    "positionClass": "toast-top-title-center",
                                };
                                toastr.info(data.msg);
                                chart_user(data.data)
                            } else {
                                toastr.options = {
                                    "positionClass": "toast-top-title-center",
                                };
                                toastr.error(data.msg);
                            }
                        },
                        error: function () {
                            toastr.options = {
                                "positionClass": "toast-top-title-center",
                            };
                            toastr.error("获取用户列表失败");
                        },
                        type: "post"
                    })
                </script>
            </div>
            <div class="col-xs-5">
                <table id="users_table" class="table-hover" style="width: 600px;margin-left: 40px">
                    <tbody>
                    <tr v-for="item in users" style="line-height: 45px;font-size: 14px">
                        <td valign="middle">
                            <span :style="{'color':item.sessionStatus == 1 ? '#8eec2e' : 'rgb(239, 239, 239)'}">●</span>
                            <span :style="{'color':item.loginFlag == 1 ? '#8eec2e' : 'rgb(239, 239, 239)'}">●&nbsp;</span>
                            <a href="javascript:void(0)" :id="item.id" onclick="showUserDetail(this)" style="text-decoration:none;">
                                <img class="img-circle" :src="item.headUrl" style="height: 35px; width: 35px">
                            </a>
                        </td>
                        <td style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-weight: 500" colspan="2">
                            <a href="javascript:void(0)" :id="item.id" onclick="showUserDetail(this)" style="text-decoration:none;">
                                <span v-text="item.displayName"></span>
                            </a>
                        </td>
                        <td v-text="item.role"></td>
                        <td v-text="item.status" :style="{'color':item.statusNum != 1 ? '#f8656d' : ''}"></td>
                        <td v-text="item.level" style="width: 15px"></td>
                        <td v-text="item.createTime" colspan="2"></td>
                    </tr>
                    </tbody>
                </table>
                <script type="text/javascript">
                    var showUserDetail;
                    $(function () {
                        showUserDetail = function (element) {
                            var userId = $(element).attr("id");
                            flush_user_detail_fun(userId);
                        }
                        var table = new Vue({
                            el: "#users_table",
                            data: {
                                users: []
                            }
                        })

                        function flush_user_list(role) {
                            $.ajax({
                                async: true,
                                url: "/admin/list",
                                data: {
                                    role: role
                                },
                                dataType: "json",
                                success: function (data) {
                                    if (data.status == 200) {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.info(data.msg);
                                        table.users = data.data
                                    } else {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function (data) {
                                    toastr.options = {
                                        "positionClass": "toast-top-title-center",
                                    };
                                    toastr.error("获取用户列表失败");
                                },
                                type: "post"
                            });
                        }

                        flush_user_list();
                        $("#show_user_list_role").change(function () {
                            var role = $(this).val();
                            flush_user_list(role);
                        })

                        function flush_user_detail_fun(id) {
                            $.ajax({
                                async: true,
                                url: "/admin/detail",
                                data: {
                                    id: id
                                },
                                dataType: "json",
                                success: function (data) {
                                    if (data.status == 200) {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.info(data.msg);
                                        $("#openUserDetail").click();
                                        user_charts(data.data);
                                        set_user_detail(data.data)
                                    } else {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function (data) {
                                    toastr.options = {
                                        "positionClass": "toast-top-title-center",
                                    };
                                    toastr.error("获取用户详情失败");
                                },
                                type: "post"
                            });
                        }

                        function set_user_detail(data) {
                            $("#user_id").text(data.id);
                            $("#uid").text(data.uid);
                            $("#role").text(data.role + '/' + data.source);
                            $("#user_detail_head").attr("src", data.headUrl).load();
                            $("#displayName").text(data.displayName);
                            $("#nickname").text(data.nickname == null || data.nickname == "" ? "未设置" : data.nickname);
                            $("#email").text(data.email == null || data.email == "" ? "未绑定" : data.email);
                            $("#phone").text(data.phone == null || data.phone == "" ? "未绑定" : data.phone);
                            $("#capacity").text(data.useCapacity + '/' + data.capacity);
                            $("#download").text(data.availableDownloadCapacity);
                            $("#growth").text(data.growthValue);
                            $("#level").text(data.level);
                            $("#register").text(data.createTime);
                            $("#ipAddress").text('未在线');
                            if (data.ipInfo != null && data.ipInfo.status == '1' && data.ipInfo.infocode == '10000') {
                                $("#ipAddress").text(data.ipInfo.country + '-' + data.ipInfo.province + data.ipInfo.city + data.ipInfo.district);
                            }
                            $("#status").text(data.status);
                            $("#share").text(data.freeShareCount);
                            if (data.status == 0) {
                                $("#lock").text("解锁");
                            }
                        }

                        $("#lock").click(function () {
                            var id = $("#user_id").text();
                            var status = $("#status").text();
                            var requestStatus = (status == 0 ? 1 : 0);
                            $.ajax({
                                async: true,
                                url: "/admin/lock",
                                data: {
                                    id: id,
                                    lock: requestStatus
                                },
                                dataType: "json",
                                success: function (data) {
                                    if (data.status == 200) {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.info(data.msg);
                                        if (status == 0) {
                                            $("#status").text("1");
                                            $("#lock").text("锁定");
                                        } else {
                                            $("#status").text("0");
                                            $("#lock").text("解锁");
                                        }
                                        var role = $("#show_user_list_role").val();
                                        flush_user_list(role);
                                    } else {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function (data) {
                                    toastr.options = {
                                        "positionClass": "toast-top-title-center",
                                    };
                                    toastr.error("获取用户详情失败");
                                },
                                type: "post"
                            });
                        })
                        $("#remove").click(function () {
                            if (!confirm("确认注销此用户吗？")) {
                                return;
                            }
                            var id = $("#user_id").text();
                            $.ajax({
                                async: true,
                                url: "/admin/remove",
                                data: {
                                    id: id
                                },
                                dataType: "json",
                                success: function (data) {
                                    if (data.status == 200) {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.info(data.msg);
                                        var role = $("#show_user_list_role").val();
                                        flush_user_list(role);
                                    } else {
                                        toastr.options = {
                                            "positionClass": "toast-top-title-center",
                                        };
                                        toastr.error(data.msg);
                                    }
                                },
                                error: function (data) {
                                    toastr.options = {
                                        "positionClass": "toast-top-title-center",
                                    };
                                    toastr.error("获取用户详情失败");
                                },
                                type: "post"
                            });
                        })
                    })
                </script>
            </div>
            <div class="col-xs-1"></div>
        </div>
    </div>
    <footer id="foot_title" class="footer navbar-fixed-bottom">
        <div class="row" style="text-align:center;font-size: 10px;height: 25px;color: black;margin-top: -3px;border-top: 1px rgb(228, 226, 226) solid;padding-top: 4px">
            <div style="text-align: center">
                <span style="float: left">
                    <div style="width: 200px">
                        <span style="color: white">占位</span>
                    </div>
                </span>
                <span>
                    Copyright &copy;&nbsp;XCloud&nbsp;2021&nbsp;All Rights Reserved·<a href="https://beian.miit.gov.cn/" style="text-decoration: none">冀ICP备20013542号-3</a>
                </span>
                <span style="float: right">
                    <div style="width: 200px">
                        <span style="color: white">占位</span>
                    </div>
                </span>
            </div>
        </div>
    </footer>
</div>
</body>
</html>